/* eslint-disable space-before-blocks */
/* eslint-disable no-unused-vars */
<template>
    <div id="GoodsSummary">
        <div class="data">实时数据</div>
        <ul class="dataList">
            <li class="datanow"  id="Colorone"><h3>总销售额</h3><p class="pnum">{{totalSales}}</p><p class="pday">日均销售额￥ {{aveTotalSales}} </p></li>
              <li class="datanow" id="Colortwo"><h3>总点击量</h3><p class="pnum">{{totalclicks}}</p><p class="pday">日均点击量 {{aveTotalclicks}} 次</p></li>
               <li class="datanow" id="Colorthree"><h3>总出库量</h3><p class="pnum">{{totalNumber}}</p><p class="pday">日均出库量 {{aveTotalNumber}} 件</p></li>
                <li class="datanow" id="Colorfour"><h3>库存余量</h3><p class="pnum">{{residualInventory}}</p><p class="pday">仓库 {{residualInventory}} 件</p></li>

        </ul>
        <div class="container">
            <div class="item item1"><h3>销量榜单</h3>
            <div class="shape">
                <div class="SaleAll" v-for="(volume,index) in volumeslist" :key="volume.goodsId">
                      <div class="SalePicture"><span><img :src="volume.goodsSurfaceimg?volume.goodsSurfaceimg:'https://cp1.douguo.com/upload/tuan/9/8/9/448_98e2d28edd67a886c474ea932177cb59.jpg'" alt=""></span></div>
                        <div class="SaleShape"><div id="colordisplay" :class="backColor"  :style="{width:volumeWidth[index]}"></div></div>
                        <div class="SaleNumber">{{volume.goodsSale}}件</div>
                </div>

                </div></div>
            <div class="item item2"><h3>待处理反馈</h3>
             <div class="shape address">
                <span v-show="displays" class="content">暂时没有留言内容~</span>
                 <div class="dir"  v-for="feedback in feedbacks" :key="feedback.messageId">
                 <div class="left"><span><img :src="feedback.headImg" alt=""></span></div>
                 <div class="middle"><div class="top"><span class="name">{{feedback.nickname}}</span><span class="data">2019/1/19</span></div><div class="bottom"><p>{{feedback.question}}</p></div></div>

                <div class="right"><button @click="handleaddress($event)" autofocus :id="feedback.messageId" class="addressbutton">处理</button></div>
            </div>

             </div>
            </div>
            <div class="item item2"><h3>留言专区</h3>

            <div class="shape address">
               <span v-show="displaycontent" class="content">暂时没有留言内容~</span>
                 <div class="dir" v-for="leavemessage in leavemessages" :key="leavemessage.messageId">
                 <div class="left"><span><img :src="leavemessage.headImg" alt=""></span></div>
                 <div class="middle"><div class="top"><span class="name">{{leavemessage.nickname}}</span><span class="data">2019/1/19</span></div><div class="bottom"><p>{{leavemessage.question}}</p></div></div>
                 <div class="right"><button :id="leavemessage.messageId"   class="addressbutton" @click="answerdia">回复</button></div>
            </div>
            </div></div>

        </div>
        <!-- 反馈详情对话框 -->
        <el-dialog
  title="反馈详情"
  :visible.sync="dialogVisible"
  width="50%"
  >
  <span><div class="content-big">
    <div class="content-top">
      <div  class="headtop"><span  class="headtext"> 用户头像：</span><span><img :src="userinformation.userHeadImg" alt=""></span></div>
    <div  class="nickname"><span class="user-nickname">用户昵称:</span> {{userinformation.userNickname}}</div></div>
    <div class="content-middle"><span  class="contented">反馈内容:</span><span>{{userinformation.question}}</span> </div>
    <div class="content-bottom"><span class="contented">反馈时间:</span><span >{{userinformation.creatTime}}</span></div></div></span>
  <div class="bussiness"  v-show="addressfalse"><span>商家处理</span> <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入内容"
  v-model="textarea2" >
</el-input></div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="showcompany" v-show="address">处理</el-button>
    <el-button type="primary" v-show="addressfalse" @click="businesshandle($event)">提交</el-button>

  </span>
</el-dialog>
<!-- 回复对话框 -->
  <el-dialog
  title="留言详情"
  :visible.sync="answerdialoge"
  width="50%"
  >
  <span><div class="content-big">
    <div class="content-top">
      <div  class="headtop"><span  class="headtext"> 用户头像：</span><span><img :src="userinformation.userHeadImg" alt=""></span></div>
    <div  class="nickname"><span class="user-nickname">用户昵称:</span> {{userinformation.userNickname}}</div></div>
    <div class="content-middle"><span  class="contented">留言内容:</span><span>{{userinformation.question}}</span> </div>
    <div class="content-bottom"><span class="contented">留言时间:</span><span >{{userinformation.creatTime}}</span></div></div></span>
  <div class="bussiness"  v-show="answerfalse"><span>商家处理</span> <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}"
  placeholder="请输入内容"
  v-model="textarea1" >
</el-input></div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="answercompany" v-show="answer">处理</el-button>
    <el-button type="primary" v-show="answerfalse" @click="answerhandle">提交</el-button>

  </span>
</el-dialog>
</div>
</template>
<script>
export default {
  name: 'GoodsSummary',
  inject: ['reload'],
  data () {
    return {
      // 总销售额
      totalSales: '',
      aveTotalSales: '',
      //   总点击量
      totalclicks: '',
      aveTotalclicks: '',
      //   总库存余量
      residualInventory: '',
      // 总出库数
      totalNumber: '',
      aveTotalNumber: '',
      feedbacks: [],
      leavemessages: [],
      display: false,
      displaycontent: false,
      displays: false,
      dialogVisible: false,
      userinformation: [],
      textarea2: '',
      textarea1: '',
      address: true,
      addressfalse: false,
      answer: true,
      answerfalse: false,
      messageid: '',
      answerdialoge: false,
      volumeslist: [],
      volumeWidth: [],
      originWidth: 8,
      backColor: 'potzero'
    }
  },
  created () {
    this.sellsituation()
    this.orderfeedback()
    this.leavemessage()
    this.salesvolume()
    this.changeColors()
  },
  methods: {
    // 改变背景颜色
    changeColors () {
      const colorArr = ['potzero', 'potone', 'pottwo', 'potthree']
      const indexnum = Math.floor(Math.random(0 * 4))
      this.backColor = colorArr[indexnum]
    },
    // 实时数据
    sellsituation () {
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/realData',
        params: {},
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        if (data.data.code === 501) {
          this.$message(data.data.message)
        } else {
          // 数据为null时，给其赋值为0
        //   仓库剩余量
          if (data.data.object.residualInventory === null) {
            this.residualInventory = 0
          } else {
            this.residualInventory = data.data.object.residualInventory
          }
          //   总销量
          if (data.data.object.totalSales === null) {
            this.totalSales = 0
          } else {
            this.totalSales = data.data.object.totalSales
          }
          //   总点击量
          if (data.data.object.totalclicks === null) {
            this.totalclicks = 0
          } else {
            this.totalclicks = data.data.object.totalclicks
          }
          //   总出库数
          if (data.data.object.totalNumber === null) {
            this.totalNumber = 0
          } else {
            this.totalNumber = data.data.object.totalNumber
          }

          this.aveTotalclicks = data.data.object.aveTotalclicks
          this.aveTotalSales = data.data.object.aveTotalSales
          this.aveTotalNumber = data.data.object.aveTotalNumber
        }
      })
    },
    // 销量排行榜
    salesvolume () {
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/commodityList',
        params: {},
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        this.volumeslist = data.data.object
        const volumes = this.volumeslist
        var sumSales = 0
        var volumeArr = []
        for (let i = 0; i < volumes.length; i++) {
          sumSales = sumSales + volumes[i].goodsSale
          volumeArr[i] = volumes[i].goodsSale
        }
        for (let j = 0; j < volumeArr.length; j++) {
          this.volumeWidth[j] = this.originWidth + (volumeArr[j] / sumSales) * 92 + '%'
        }
      })
    },

    // 订单反馈,type为0代表订单反馈,为1代表留言
    // 获取待处理反馈列表
    orderfeedback () {
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/queryMessage',
        params: {
          type: 0
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        if (data.data.object.length === 0) {
          this.displays = !this.displays
        } else {
          this.feedbacks = data.data.object
        }
      })
    },
    // 获取留言列表
    leavemessage () {
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/queryMessage',
        params: {
          type: 1
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        if (data.data.object.length === 0) {
          this.displaycontent = !this.displaycontent
        } else {
          this.leavemessages = data.data.object
        }
      })
    },
    showcompany () {
      this.address = !this.address
      this.addressfalse = !this.addressfalse
    },
    handleaddress (e) {
      this.dialogVisible = !this.dialogVisible
      const messageId = e.target.getAttribute('id')
      window.localStorage.setItem('messageId', messageId)

      // 根据messageId查询详情
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/queryMessageDetails',
        params: {
          messageId: messageId
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        this.userinformation = data.data.object
      })
    },
    // 管理员进行处理
    businesshandle () {
      const messageid = window.localStorage.getItem('messageId')
      this.messageid = messageid
      this.$axios({
        method: 'post',
        url: 'Menu/Admin/resolve',
        params: {
          messageId: this.messageid,
          content: this.textarea2
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        this.reload()
        this.$message.success(data.data.object)
        this.dialogVisible = !this.dialogVisible
      })
    },
    answercompany () {
      this.answer = !this.answer
      this.answerfalse = !this.answerfalse
    },
    // 回复
    answerdia (e) {
      this.answerdialoge = !this.answerdialoge
      const messageId = e.target.getAttribute('id')
      window.localStorage.setItem('messageId', messageId)
      // 根据messageId查询详情
      this.$axios({
        method: 'get',
        url: '/Menu/Admin/queryMessageDetails',
        params: {
          messageId: messageId
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        this.userinformation = data.data.object
      })
    },
    // 管理员进行处理
    answerhandle () {
      const messageid = window.localStorage.getItem('messageId')
      this.messageid = messageid
      this.$axios({
        method: 'post',
        url: 'Menu/Admin/resolve',
        params: {
          messageId: this.messageid,
          content: this.textarea2
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        this.reload()
        this.$message.success(data.data.object)
        this.answerdialoge = !this.answerdialoge
      })
    }
  }
}

</script>
<style lang="less" scoped>
.bussiness{
 margin-top: 40px;
    margin-left: 68px;
    span{
      display: block;
      margin-bottom: 20px;
    }
}
.contented{
  margin-right: 20px;
}
.content-bottom{
  margin-top: 38px;

}
.content-middle{
  margin-top: 38px;

}
.nickname{
  margin-top: 20px;
}
.user-nickname{
  margin-right: 38px;
}
.headtext{
  line-height: 72px;
}
.headtop{
  display: flex;
  align-items: center;
  span{
    width: 72px;
    height: 72px;
    display: block;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.content-big{
  width: 80%;
  height: 248px;
  margin: 0 auto;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.addressbutton{
  background-color: #ff9512;
    color: #fff;
    display: block;
    width: 50px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    padding: 1px;
    margin-top: 12px;
    border-radius: 4px;
}
.content{
margin: 40px;
    display: block;
    text-align: center;
    color: #999;
    font-size: 13px;
}
#colordisplay{
    height: 56%;
    border-radius:1px 25px 25px 1px;
    margin-top: 12px;
     background-image:linear-gradient(#f20606,#ff8181);
}
        .potone{
        background-image:linear-gradient(#f20606,#ff8181);
        }
        .pottwo{
          background-image: linear-gradient(90deg,#ffd706,#ffeb81);
        }
        .potthree{
          background-image: linear-gradient(90deg,#35f304,#bfff81);
        }
         .potfour{
          background-image: linear-gradient(90deg,#07acf3,#81e1ff);
        }
.data{
    font-size: 14px;
    margin-top: 20px;
}
 .dataList{
        display: flex;
        list-style: none;
        margin-top: 10px;
        justify-content: space-between;
        cursor: pointer;
        .datanow{
            width: 260px;
            height: 136px;
            // background-color: lightblue;
            display: block;
            margin-right: 10px;
            color: #fff;
            border-radius: 4px;
            h3{
                font-size: 14px;
                margin: 10px;
            }
            .pnum{
                font-size: 30px;
                margin:20px 45px;
                text-align: center;
            }
            .pday{
                font-size: 13px;
                margin: -18px 47px;
            }
        }
    }
    .container{
        height: 276px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        .item{
            margin-right: 10px;
            h3{
                font-size: 14px;
                margin: 10px;
            }
        }
        .item1{
            flex-grow: 2;
        }
         .item2{
            flex-grow: 1;
          }
          .shape{
                height: 88%;
               border: 1px solid rgba(0, 0, 0, .2);
               margin-top: 12px;
               }
            }
    #Colorone{
        // 浏览器不支持时显示
        background-color: rgb(63, 128, 255);
        // 使用css3渐变效果实现过渡色
        background-image: linear-gradient(#2e75ff, #74a3ff);
    }
    #Colortwo{
        background-color: #f956eb;
        background-image: linear-gradient(#fe2ed4, #f578fe);

    }
     #Colorthree{
        background-color:#ff6245;
        background-image: linear-gradient(#f62020, #ff9a7a);

    } #Colorfour{
        background-color:#3bffb1;
        background-image: linear-gradient(#3df40b, #bfff80);

    }
    .shape.address {
        overflow: auto;
    }
    .address{
        cursor: pointer;
        // overflow:auto;
        .dir{
            width: 100%;
            height: 56px;
            display: flex;
            justify-content: start;
            margin-bottom: 5px;
       .left{
            flex: 1;
            width: 0px;
        span{
            width: 40px;
          height: 40px;
              display: block;
               border-radius: 50%;
         margin: 12px auto;
       img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }}
        }
        .middle{
            flex: 2;
            .top{
                padding: 10px;
                .name{
                    font-size: 13px;
                    font-weight: 800;
                }
                .data{
                    font-size: 12px;
                  margin-left: 0px;
                }
            }
            .bottom{
                padding-right: 10px;
                p{
                    font-size: 11px;
                    margin-left: 10px;
                   overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 100px;

                }
            }
        }
        .right{
            width: 0px;
            flex: 1;
            .el-button{
               background-color: #ff9512;
               color: #fff;
               display: block;
               width: 50px;
               height: 30px;
              font-size: 12px;
              text-align: center;
              padding: 1px;
              margin-top: 12px;
        }
        } }
    }
    .SaleAll{
        margin-top: 10px;
        width: 100%;
        height: 20%;
        display: flex;
        .SalePicture{
            flex: 1;
            span{
                width: 55px;
                height: 55px;
                background-color: #999;
                display: block;
                margin: 0px 7px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
}
      .SaleShape{
          flex: 3;
          // background-color: #ff9512;
}
     .SaleNumber{
            flex: 1;
            text-align: center;
            line-height: 56px;
            font-size: 13px;

}
    }
</style>
